<template>
  <div class="all" v-loading="loading">
    <div class="add-nav">
      注册时间:
    <el-date-picker
      v-model="time1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd 00:00:00">
    </el-date-picker>
    <el-input type="text" value="" placeholder="ID或者用户名或者手机号" v-model="condition.idOrName"/>  </el-input>
        <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
    </div>
<div style="margin-top: 10px;">
  <el-table :data="list" :header-cell-style="{background:'#eef3f7'}" >
    <el-table-column align="center" prop="userId" label="用户Id" width="90"></el-table-column>
    <el-table-column align="center"
    label="头像"
    >
   <template slot-scope="scope">
    <el-avatar shape="square" :size="100" fit="fill" :src="scope.row.imgUrl"></el-avatar>
   </template>
    </el-table-column>
    <el-table-column align="center" prop="userName" label="用户名"></el-table-column>
    <el-table-column align="center" prop="nickName" label="昵称"></el-table-column>
    <el-table-column align="center"  prop="telephone" label="手机号"></el-table-column>
    <el-table-column align="center" prop="city" label="所在地"></el-table-column>
    <el-table-column align="center"  prop="age" label="年龄"></el-table-column>
    <el-table-column align="center" prop="sex" label="性别"></el-table-column>
    <el-table-column align="center" prop="earnBean" label="金币"></el-table-column>
    <el-table-column align="center" prop="regTime" label="注册时间"></el-table-column>
    <el-table-column align="center" label="状态" >
      <template slot-scope="scope">
        <i v-if="scope.row.sign==0">未签约</i>
        <i v-else>已签约</i>
      </template>
    </el-table-column>
    <el-table-column align="center" label="管理操作" width="200">
      <template slot-scope="scope" style="display: flex;">
        <el-button size="mini" type="danger" v-if="scope.row.cancelled==0" @click="forbidden(scope.row)">注销</el-button>
        <el-button  v-else @click="renew(scope.row)" size="mini"  type="success">恢复</el-button>
        <el-button type="primary" size="mini" @click="addshow(scope.row)">手动加值</el-button>
      </template>
    </el-table-column>
    <el-table-column align="center" label="聊天室管理">
      <template slot-scope="scope">
        <el-button size="mini" @click="msg=true,Recommend.userId=scope.row.userId">设置推荐位</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="condition.pageIndex"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>

    </div>
<!--    <Popup v-show="popup" @cancel='cancel' :date="date">
    </Popup> -->
  <el-dialog width="20%" title="手动加值" :visible.sync="show" center>
    <el-form :model="add" :rules="rules" label-width="100" ref="AddValue">
      <el-form-item label="用户ID">
        <el-input v-model="add.userId" readonly></el-input>
      </el-form-item>
      <el-form-item label="加/减值额" prop="coin">
        <el-select v-model="add.select" size="small">
          <el-option :value="0" label="+"></el-option>
          <el-option :value="1" label="-"></el-option>
        </el-select>
        <el-input v-model="add.coin" size="small"></el-input>
      </el-form-item>
    </el-form>
    <div style="text-align: center;margin-top: 15px;">
        <el-button type="primary" @click="subim()">提交</el-button>
    </div>
  </el-dialog>
  <el-dialog width="20%" title="添加推荐位" :visible.sync="msg" center>
    <el-radio-group v-model="Recommend.position">
            <el-radio-button :label="1">1号位</el-radio-button>
            <el-radio-button :label="2">2号位</el-radio-button>
            <el-radio-button :label="3">3号位</el-radio-button>
      </el-radio-group>
      <div style="text-align: center;margin-top: 15px;"> <el-button type="primary" @click="addRecommend">确定</el-button></div>
  </el-dialog>
  </div>
</template>
<script>
  import {cancelled,RecommendAdd,CoinAdd} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
    inject:["reload"],
    data(){
      return{
        loading:true,
        show:false,
        time1: [],
        condition:{
          quantity:10,
          pageIndex:1,
          pageSize:10,
        },
        add:{
          select:0,
        adminName:Cookies.get('adminName'),
        token:Cookies.get('token'),},
        date:'',
        list:[],
        admin:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        msg:false,
        Recommend:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token')
        },
        rules:{
          coin:[{ required: true, message: '请输入加减额度', trigger: 'blur' },],
        },
        }
        },
    methods:{
      //设置推荐位
      addRecommend(){
        if(this.Recommend.position){
          RecommendAdd(this.Recommend).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }
          })
        }else{
          this.$message.error('请选择推荐位')
        }

      },
      //禁用
      forbidden(val){
        var _this=this
           this.$confirm('此操作将注销'+val.nickName+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
			cancelled(val,this.admin).then(res=>{
				if(res.code==0){
            _this.reload()
					this.$message({
					  type: 'success',
					  message: '禁用成功!'
					});
				}
			})


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //恢复
      renew(val){
        var _this=this
           this.$confirm('此操作将恢复'+val.nickName+', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          _this.Postdata('/admin/user/recover',val)
          this.$message({
            type: 'success',
            message: '恢复成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //搜索
      search(){
        this.condition.fromRegTime=this.time1[0]
        this.condition.toRegTime=this.time1[1]
         this.Postdata('/admin/user/get',this.condition)
      },
      handleSizeChange(val) {
        this.condition.pageSize=val
        this.Postdata('/admin/user/get',this.condition)
      },
       handleCurrentChange(val) {
         this.condition.pageIndex=val
        this.Postdata('/admin/user/get',this.condition)
      },
      Postdata(url,e){
              var _this=this
              this.$axios
              .post('/api'+url, {
                 adminName:_this.$cookies.get('adminName'),
                 token:_this.$cookies.get('token'),
                 fromRegTime:e.fromRegTime,
                 toRegTime:e.toRegTime,
                 idOrName:e.idOrName,
                 sign:e.sign,
                 liveStatus:e.liveStatus,
                 cancelled:e.cancelled,
                 pageIndex:e.pageIndex,
                 pageSize:e.pageSize,
                 userId:e.userId
                },)
          .then(function(response){
                  if(response.data.code==0){
                    if(response.data.data==null){
                      _this.$alert("操作成功", '提示', {
                             confirmButtonText: '确定',
                             callback: action => {
                               //刷新
                               _this.reload()
                             }
                           });
                    }else{
                      _this.condition.quantity=response.data.data.sum
                      _this.list=response.data.data.members
                    }

                  }else{
                    if(response.data.code==3001){
                      _this.$alert('查无此人', '提示', {
                         confirmButtonText: '确定',
                         callback: action => {
                           _this.reload()
                         }
                       });
                    }
                  }
                 })
                 .catch(function(error){
                   console.log(error)
                 })
      },
        cancel(){
            this.show=false
           Object.assign(this.$data.add, this.$options.data().add)
        },
        addshow(e){
          this.show=true
          this.add.userId=e.userId
        },
        subim(){
       this.$refs.AddValue.validate((valid)=>{
         if(valid){
           if(this.add.select==1){
           this.add.coin='-'+Number(this.add.coin)
           }else{
             this.add.coin=Number(this.add.coin)
           }
            CoinAdd(this.add).then(res=>{
              if(res.code==0){
                this.$message.success('操作成功')
                this.reload()
              }else{
                this.$message.error(res.desc)
              }
            })
         }
       })

          },

},
mounted(){
 this.Postdata('/admin/user/get',this.condition)
    this.$nextTick(function(){
     this.loading=false
    })
}
        }
</script>

<style lang="scss" scoped>
.el-input{width: auto;}
.el-form-item{
  .el-select{width: 60px;
    /deep/ .el-input{width: 100%;}
  }
  /deep/ .el-input{width: 52%;}
}
.el-radio-group{width: 90%;
    margin: auto;
    display: block;}
.el-radio-button{
  margin: 3%;
  border-left: 1px solid #dcdfe6
}
</style>
